require(['./config'], () => {
  require(['jquery', 'header', 'nav', 'footer'], () => {
    class Index {
      constructor () {
        this.addFlash()
        this.detaildown()
        this.topbutton()
      }
      // detail
      detaildown(){
        $(() => {
            $('li:has(.detail)').hover(function () {
              // 如果100ms内再次进入，把定时器清除，就不隐藏了
              clearTimeout(this.timer)
              $(this).children('.detail').stop().slideDown(500)
            }, function () {
              // 离开的时候可能会再短时间内再次进入，所以用一个延时器
              this.timer = setTimeout(() => {
                $(this).children('.detail').stop().slideUp(500)
              }, 100)
            })
          })
    }
    // 回到顶部
    topbutton(){
      $(window).scroll(function(){
        if ($(window).scrollTop()>100){ 
          $("#topBtn").fadeIn(700); 
      }
      else                           
      {
          $("#topBtn").fadeOut(700); 
      }
        $('#topBtn').on('click', function() {
          $('body,html').animate({ 
            scrollTop:0 
        },700);
        return false; 
      })
      })
    }
      addFlash () {
        const len = $('#index-flash ul li').length
        const width = $('#index-flash ul li').width()
        console.log(width)
        let index = 0
        let lastIndex = 0
        let timer = null
        let isMove = false // 标志位，true代表正在移动，false代表静止
        for (var i = 0; i < len; i++) {
          $('<li>').html(i+1).addClass(i === 0 ? 'ac' : '').appendTo('#index-flash ol')
        }

        // 在ul后面追加第0张图
        $('#index-flash ul').append($('#index-flash ul li:first').clone())

        // 计算ul宽度
        $('#index-flash ul').width(width * (len + 1))

        // 按钮点击
        $('#index-flash ol li').on('click', function () {
          // isMove为false，代表处于静止状态，才允许移动
          if (!isMove) {
            // 开始运动了
            isMove = true
            lastIndex = index
            index = $(this).index()
            $('#index-flash ol li').eq(lastIndex).removeClass('ac')
            $('#index-flash ol li').eq(index).addClass('ac')
            $('#index-flash ul').stop().animate({
              left: -index * width
            }, 1000, function () {
              // 运动结束，返回静止状态
              isMove = false
            })

          }
        })

        // 向后
        $('#next').on('click', function () {
          if (!isMove) {
            isMove = true
            lastIndex = index
            index++
            if (index === len) {
              index = 0
              // 先运动到追加那一张，再瞬间回到第0张
              $('#index-flash ul').stop().animate({
                left: -len * width
              }, 1000, function () {
                $('#index-flash ul').css('left', 0)
                isMove = false
              })
            } else {
              // 正常移动
              $('#index-flash ul').stop().animate({
                left: -index * width
              }, 1000, function () {
                isMove = false
              })
            }
            // 不管是if还是else，index的值都是正确的值，所以可以同步修改按钮的样式
            $('#index-flash ol li').eq(lastIndex).removeClass('ac')
            $('#index-flash ol li').eq(index).addClass('ac')
          }
        })

        // 向前
        $('#prev').on('click', function () {
          if (!isMove) {
            isMove = true
            lastIndex = index
            index--
            if (index < 0) {
              index = len - 1
              // 瞬间拉到追加那张图，再往len-1移动
              $('#index-flash ul').css('left', -len * width).stop().animate({
                left: -(len - 1) * width
              }, 1000, function () {
                isMove = false
              })
            } else {
              $('#index-flash ul').stop().animate({
                left: -index * width
              }, 1000, function () {
                isMove = false
              })
            }
            $('#index-flash ol li').eq(lastIndex).removeClass('ac')
            $('#index-flash ol li').eq(index).addClass('ac')
          }
        })
        // 首先autoPlay自调用，默认开始轮播了，然后再return自己，那么移出也就有这个事件函数了
        $('#index-flash').hover(function () {
          clearInterval(timer)
        }, (function autoPlay () {
          timer = setInterval(() => {
            $('#next').trigger('click')
          }, 3000)
          return autoPlay
        })())
      }
    }
    new Index()
    })
  })